<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>结构伪类</title>
        <style type="text/css">
            /* Universal Selector */
            * {
                margin: 25px;
                border: 1px solid blue;
            }
            /* structural pseudo-classes */
            :root {
                border-color: red;
            }
            :empty {
                height: 20px;
                background-color: #dfdfdf;
            }

            /* 选择 li 直接父元素中的 偶数 子元素 */
            li:nth-child(2n) {
                background-color: #ffff00;
            }

            /* 选择 li 直接父元素中的 奇数 子元素 */
            li:nth-child(2n+1) {
                background-color: #7595fe;
            }

            /* 选择 li 直接父元素中的倒数第二个子元素 */
            li:nth-last-child(2) {
                color: #ff0000;
                font-size: 30px;
            }

            /* 选择 li 直接父元素中的首个子元素 */
            li:first-child {
                color: darkorchid;
                text-align: center;
            }

            /* 选择 li 直接父元素中的最后一个子元素 */
            li:last-child {
                color: darkorange;
                text-align: center;
            }

            li:only-child {
                color: #fff;
                font-size: 30px;
                background-color: green;
            }

            article>section:nth-of-type(2n) {
                background-color: #ffff00;
            }

            article>section:nth-of-type(2n+1) {
                background-color: #dfdfdf;
            }

            article>*:nth-child(2n) {
                color: #ff0000;
            }

            article>div:first-of-type {
                text-align: right;
            }

            article>div:last-of-type {
                text-align: right;
            }

        </style>
    </head>
    <body>
        <h3>结构伪类 ( structural pseudo-classes )</h3>
        <div></div>
        <p></p>

        <ul>
            <li>first</li>
            <li>second</li>
            <li>third</li>
            <li>fourth</li>
            <li>fifth</li>
        </ul>

        <ul>
            <li>老碗鱼</li>
        </ul>

        <article>
            <section>天字一号</section>
            <p>天字二号</p>
            <div>天字三号</div>
            <section>地字一号</section>
            <p>地字二号</p>
            <div>地字三号</div>
            <section>玄字一号</section>
            <p>玄字二号</p>
            <div>玄字三号</div>
        </article>

    </body>
</html>